<template>
	<view class="greyBox" style="width: 100vw;overflow: hidden;">
		<!-- <view :class='userInfo.authStatus == 3?"toptips error":"toptips"' v-if="userInfo.authStatus != 2">
			{{toptipsMessage}}
		</view> -->
		<view class="memberBlock">
			<view class="userBlock">
				<view class="avatar" @click="tipsPopup = true">
					<u-upload :custom-btn="true" max-count="1" :show-upload-list="false" size-type="compressed"
						:action="action" @on-uploaded="uploadOver" ref="uUpload" name="uploadFiles">
						<img :src='userInfo.avatar==""||userInfo.avatar==null?"https://supply.zhongyimotor.com/upload/applet/head@3x.png":userInfo.avatar'
							alt="" slot="addBtn" class="addBtn">
					</u-upload>
				</view>

				<view class="info">
					<view class="name">{{userInfo.name == ""?"待认证":userInfo.name}}</view>
					<view class="content">欢迎使用汽车出口服务平台</view>
				</view>
			</view>
			<view class="memberCard">
				<view class="cardMiddle">
					<view class="list">
						<view class="item">
							<view class="name">会员余额(元)</view>
							<view class="num">{{memberInfo.currentAmount}}</view>
						</view>
					</view>
					<view class="logButton" @click="toConsumptionLog">消费记录 <u-icon name="arrow-right" width="24"
							height="24"></u-icon> </view>
				</view>

			</view>
		</view>
		<u-cell-group>
			<u-cell-item icon-size="56"
				icon="https://supply.zhongyimotor.com/upload/applet/icon_renzheng_supplier@2x.png" title="企业认证"
				:title-style="{'color':'#202020','font-size':'34rpx',}" @click="toAttestation"
				:arrow='authentication=="认证中"?false:true'>
				<view slot="right-icon" :class='"authenticRight state_"+userInfo.authStatus'>
					<view class="icon" v-if="userInfo.authStatus == 0">
						<u-icon name="https://supply.zhongyimotor.com/upload/applet/icon_rzwei_supplier@2x.png"
							width="24" height="24"></u-icon>
					</view>
					<view class="icon" v-if="userInfo.authStatus == 1">
						<u-icon name="https://supply.zhongyimotor.com/upload/applet/icon_rz@2x.png" width="24"
							height="24"></u-icon>
					</view>
					<view class="icon" v-if="userInfo.authStatus == 2">
						<u-icon name="https://supply.zhongyimotor.com/upload/applet/icon_rz_success_suppplier@2x.png"
							width="24" height="24"></u-icon>
					</view>
					<view class="icon" v-if="userInfo.authStatus == 3">
						<u-icon name="https://supply.zhongyimotor.com/upload/applet/icon_rzweitongguo_supplier@2x.png"
							width="24" height="24"></u-icon>
					</view>
					<view class="content">
						{{authentication}}
					</view>
				</view>
			</u-cell-item>
			<u-cell-item icon-size="56" icon="https://supply.zhongyimotor.com/upload/applet/icon_bank_supplier@2x.png"
				title="银行配置" :title-style="{'color':'#202020','font-size':'34rpx',}" @click="toBank"></u-cell-item>
			<u-cell-item icon-size="56" :title-style="{'color':'#202020','font-size':'34rpx',}"
				icon="https://supply.zhongyimotor.com/upload/applet/icon_set@2x.png" title="设置"
				@click="toSetting"></u-cell-item>
		</u-cell-group>

		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import moment from "moment"
	export default {
		data() {
			return {
				toptipsMessage: "",
				authentication: "",
				tipsPopup: false,
				action: "",
				memberInfo: {
					currentAmount: 0
				},
				userInfo: {
					avatar: "",
					name: "",
					authStatus: 0,
					authState: "",
					authStatusText: ""
				},
				isAttestation: true,
				sellerId: "",
				remark: ""
			}
		},
		onShow() {
			let that = this
			that.action = this.$config.uploadFileUrl
			that.memberInfo = {
				sumAmount: 0,
				currentAmount: 0,
			}
			that.userInfo = {
				avatar: "",
				name: "",
				authStatus: 0,
				authState: "",
				authStatusText: ""
			}
			that.getMemberInfo()
			that.getInfo()
		},
		methods: {
			getInfo() {
				let that = this
				console.log(1)
				that.$api.getInfo().then((res) => {

					that.userInfo.avatar = res.result.avatar;
					that.userInfo.authStatus = res.result.authStatus;
					uni.setStorage({
						key: 'userPhone',
						data: res.result.mobile,
					});
					uni.setStorage({
						key: 'authStatus',
						data: res.result.authStatus,
					})

					switch (res.result.authStatus) {
						case 0:
							that.userInfo.authState = "待认证"
							that.authentication = "去认证"
							that.toptipsMessage = "您暂未企业认证，无法进行其它操作，赶紧去认证吧 ~"
							uni.setStorage({
								key: 'isAttestation',
								data: false,
							})
							that.isAttestation = false
							break;
						case 1:
							that.userInfo.authState = "认证中"
							that.authentication = "审核中"
							that.toptipsMessage = "平台正在审核中，请耐心等待 ~"
							that.isAttestation = false
							uni.setStorage({
								key: 'isAttestation',
								data: false,
							})
							break;
						case 2:
							that.userInfo.authState = "已认证"
							that.authentication = "更新认证"
							uni.setStorage({
								key: 'isAttestation',
								data: true,
							})
							uni.setStorage({
								key: "sellerInfo",
								data: res.result.sellerInfo
							})
							break;
						case 3:
							that.userInfo.authState = "认证失败"
							that.toptipsMessage = "认证已驳回：" + res.result.sellerInfo.remarks
							that.authentication = "未通过"
							that.remark = res.result.sellerInfo.remarks
							that.isAttestation = false
							uni.setStorage({
								key: 'isAttestation',
								data: false,
							})
							uni.setStorage({
								key: "sellerInfo",
								data: res.result.sellerInfo
							})
							break;
					}
					if (res.result.sellerInfo != null) {
						that.userInfo.name = res.result.sellerInfo.name
						that.userInfo.authStatus = res.result.authStatus
						that.sellerId = res.result.sellerInfo.id
					}
				})
			},
			toAttestation() {
				let url = ""
				switch (this.userInfo.authStatus) {
					case 0:
						url = `/pages/attestation/index`
						break;
					case 1:
						uni.showToast({
							title: '平台审核中',
							icon: 'none'
						})
						break;
					case 2:
						url = `/pages/attestation/index?mode=update&id=${this.sellerId}`
						break;
					case 3:
						url = `/pages/attestation/index?id=${this.sellerId}&remark=${this.remark}`
						break;
				}
				uni.navigateTo({
					url: url
				})
			},
			async uploadOver(lists, name) { //图片完成上传后（框架）
				let that = this
				let params = {
					avatar: lists[0].response.result[0].path
				}
				await that.$api.changeAvatar(params) //修改头像
				uni.reLaunch({
					url: "/pages/mine/index"
				})

			},
			getMemberInfo() {
				let that = this
				that.$api.getMemberInfo().then(res => {
					if (res.result != null) {
						that.memberInfo = res.result
						uni.setStorage({
							key: 'currentAmount',
							data: that.memberInfo.currentAmount,
						});
						that.memberInfo.currentAmount = that.unitConverter(that.memberInfo.currentAmount)
					}
				})
			},

			toSetting() {
				uni.navigateTo({
					url: `/pages/setting/index`
				})
			},
			toBank() {
				uni.navigateTo({
					url: `/pages/bank/index`
				})
			},
			toConsumptionLog() {
				let that = this
				that.isAttestation = uni.getStorageSync("isAttestation")
				if (that.isAttestation) {
					uni.navigateTo({
						url: `/pages/consumptionLog/index`
					})
				} else {
					uni.showModal({
						title: '提示',
						content: that.userInfo.authStatus == 1 ? '请等待认证审核' : "请完成认证",
						showCancel: false,
						success: (res) => {
							if (res.confirm && that.userInfo.authStatus != 1) {
								that.toAttestation()
							}
						}
					})
				}

			}
		}
	};
</script>

<style scoped lang="scss">
	/deep/.u-border-bottom:after,
	.u-border-left:after,
	.u-border-right:after,
	.u-border-top-bottom:after,
	.u-border-top:after,
	.u-border:after {
		left: 94rpx !important;
	}

	/deep/.u-cell-box {
		.u-border-bottom:after,
		.u-border-left:after,
		.u-border-right:after,
		.u-border-top-bottom:after,
		.u-border-top:after,
		.u-border:after {
			border-top: none;
		}
	}



	.memberBlock {
		width: 100%;
		padding-top: 44rpx;

		.userBlock {
			width: 690rpx;
			margin: 0 auto;
			display: flex;

			.avatar {
				width: 128rpx;
				height: 128rpx;
				line-height: 0;
				border-radius: 300px;
				background: #DEE2ED;
				margin-right: 20rpx;
				position: relative;

				.addBtn {
					width: 128rpx;
					height: 128rpx;
				}

				img {
					border-radius: 300px;
				}

				.tag {
					position: absolute;
					left: 94rpx;
					top: -10rpx;
					width: 100rpx;
					height: 28rpx;
					border-radius: 20rpx 0 20rpx 0;
					font-size: 20rpx;
					line-height: 28rpx;
					text-align: center;

					&.doing {
						background: #FFE7D8;
						color: #FA7533;
					}

					&.complete {
						background: #EDFBF6;
						color: #32D296;
					}
				}
			}

			.info {
				padding-top: 6rpx;

				.name {
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #8E5F26;
					line-height: 64rpx;
				}

				.content {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #9D7544;
					line-height: 36rpx;
				}
			}
		}

		.memberCard {
			width: 690rpx;
			margin: 40rpx auto 0;
			position: relative;

			.cardMiddle {
				padding: 20rpx 30rpx;
				width: 690rpx;
				height: 128rpx;
				background: linear-gradient(270deg, #53576C 0%, #292C3A 100%);
				border-radius: 24rpx 24rpx 0rpx 0rpx;

				.logButton {
					position: absolute;
					right: 0;
					top: 30rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 48rpx;
					;
					color: #D4D5DC;
					width: 148rpx;
					height: 48rpx;
					text-align: center;
				}

				.list {
					display: flex;

					.item {

						.name {
							color: #F0CFB3;
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							margin-bottom: 12rpx;
						}

						.num {
							font-size: 36rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
							text-align: right;
							color: #FFF;
						}
					}
				}

				.title {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #8E5F26;
				}
			}
		}
	}

	.popupTitle {
		width: 750rpx;
		font-size: 26rpx;
	}

	.authenticRight {
		width: 140rpx;
		height: 40rpx;
		border-radius: 20rpx;
		line-height: 40rpx;
		font-size: 22rpx;
		display: flex;
		justify-content: center;

		&.state_0 {
			background: linear-gradient(270deg, #DEDEDE 0%, #CCCCCC 100%);
			color: #FFF;
		}

		&.state_2 {
			background: #D0EDE3;
			color: #0FBD7F;
		}

		&.state_1 {
			background: #FFE7D8;
			color: #FA7533;
		}

		&.state_3 {
			background: #FCE6E9;
			color: #F76260;
		}

		view {
			&.icon {
				padding-top: 5rpx;
				margin-right: 6rpx;
			}

			align-items: center;
		}
	}
</style>